<template>
    <div class="container">
        <div class="main">
            <div class="tab" style="margin-bottom: 20px;">维修报修>统计分析</div>

            <div class="row flex">
                <div class="row_l" style="height:320px;">
                    <div class="row_header flex">
                        <div class="row_header_l flex">
                            <img src="../../assets/DataStatistics_pie.png">
                            <p>维修比例图</p>
                        </div>
                        <div class="row_header_r flex">
                        </div>
                    </div>
                    <div ref="echart1" class="echart1" id="echart1"></div>
                </div>
                <div class="row_r" style="height:320px;">
                    <div class="row_header flex">
                        <div class="row_header_l flex">
                            <img src="../../assets/DataStatistics_bar.png">
                            <p>每日报修统计</p>
                        </div>
                        <div class="row_header_r">
                            <!-- <el-select v-model="value" placeholder="Select" style="width: 240px">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select> -->
                        </div>
                    </div>
                    <div ref="echart1" class="echart2" id="echart2"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { httpService } from "@/utils/httpService";
import { ElConfigProvider, ElMessageBox, ElMessage, ElLoading } from "element-plus";
import { Search, RefreshRight, Upload } from '@element-plus/icons-vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import * as echarts from 'echarts';

export default {
    name: "MedicalProductIndex",
    components: { ElConfigProvider, ElMessage, Search, RefreshRight, Upload },
    data() {
        return {
            form: {
                name: "",
                address: "",
                typeId: "",
                status: "",
            },
            total: 0,
            page: 1,
            pageSize: 10,
            list: [],
            typeList: [],
        };
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getListCount()
        this.getlistAll()
    },
    methods: {

        getListCount() {
            httpService("/javaApi/repairInfo/v2/listCount", {}, "get").then((data) => {
                if (data) {
                    this.totalData = data
                    // 计算总和
                    const totalSum = Object.values(data).reduce((acc, value) => acc + value, 0);

                    // // 转换为所需的数组格式
                    this.echart1Data = [
                        { value: data.total1, name: '新报修', itemStyle: { color: '#0EC1FD' }, percentage: ((data.total1 / totalSum) * 100).toFixed(2) + "%" },
                        { value: data.total2, name: '维修中', itemStyle: { color: '#67D3ED' }, percentage: ((data.total2 / totalSum) * 100).toFixed(2) + "%" },
                        { value: data.total3, name: '已完成', itemStyle: { color: '#4D97F0' }, percentage: ((data.total3 / totalSum) * 100).toFixed(2) + "%" },
                    ];
                    this.getEcharts1(this.echart1Data)
                }
            })
        },
        getlistAll() {
            httpService("/javaApi/repairInfo/v2/listAll", {}, "get").then((data) => {
                if (data) {
                    this.listAll = data
                    const names = []
                    const datas = []
                    data.forEach(item => {
                        names.push(item.submitDate)
                        datas.push(item.count)
                    })
                    this.getEcharts2(names, datas)
                }
            })
        },

        getEcharts1(allData) {
            var chartDom = document.getElementById('echart1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    right: 'right',
                    top: 65,
                    textStyle: {
                        fontSize: 14,
                        color: '#676767', // 文字颜色
                        padding: [20, 0, 0, 5], //可以调整方块的位置
                        rich: {
                            line1: {
                                color: '#676767', // 第一行的颜色
                                fontSize: 12,
                                padding: [0, 0, 5, 0] // 第一行与第二行的间距
                            },
                            line2: {
                                color: '#000', // 第二行的颜色
                                fontSize: 16,
                                fontWeight: 'bold', // 加粗  
                            }
                        },
                    },
                    itemGap: 18, // 设置图例之间的间距
                    padding: [0, 50, 0, 0],// 设置图例的内边距，上右下左 
                    formatter: function (name) {
                        const data = option.series[0].data.find(item => item.name === name);
                        console.log(data);
                        return '{line1|' + name + '}\n{line2|' + data.value + '       ' + data.percentage + '}';
                    }
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['20%', '70%'],
                        center: ['25%', '50%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            // borderRadius: 10,
                            // borderColor: '#fff',
                            // borderWidth: 2
                        },
                        label: {
                            show: true,
                            position: 'inside', // 标签位置
                            formatter: '{d}%', // 显示百分比
                            // textStyle: {
                            color: '#fff', // 设置文字颜色
                            fontWeight: 'bold', // 设置文字加粗
                            fontSize: 9, // 设置文字大小          
                            // }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: allData
                    }
                ]
            };
            option && myChart.setOption(option);
        },

        getEcharts2(names, datas) {
            var chartDom = document.getElementById('echart2');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                grid: {
                    // 控制图表内容区域距离画布上边缘的距离  
                    top: '25px',
                    bottom: '30px',
                    left: '15px',
                    right: '15px',
                },
                xAxis: {
                    type: 'category',
                    data: names,
                    // data: ['07/18', '07/19', '07/20', '07/21', '07/22', '07/23', '07/24'],
                    axisTick: {
                        show: false // 隐藏X轴的刻度线
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#E9E9E9', // 设置X轴的颜色
                            width: 1 // 设置X轴线的粗细
                        }
                    },
                    axisLabel: {
                        color: '#778088' // 设置X轴标签的颜色
                    },
                    // splitLine: {
                    //     lineStyle: {
                    //         color: '#E9E9E9', // 设置平行于X轴的线的颜色
                    //         width: 1 // 设置线的粗细
                    //     }
                    // }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: false // 隐藏Y轴的标签 
                    },
                },
                series: [{
                    data: datas,
                    // data: [3, 5, 4, 14, 7, 9, 2],
                    type: 'line',
                    smooth: false,
                    itemStyle: {
                        color: '#0EC1FD', // 实心圆点的颜色
                        borderColor: '#ffffff', // 圆点边框的颜色
                        borderWidth: 2 // 圆点边框的宽度
                    },
                    lineStyle: {
                        color: '#0EC1FD', // 线条颜色
                        width: 3.5,
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0, color: 'rgba(14, 193, 253, 0.38)' // 顶部渐变色
                        }, {
                            offset: 1, color: 'rgba(255, 255, 255, 0)' // 底部渐变色
                        }])
                    },
                    symbol: 'circle',
                    symbolSize: 10,
                    label: {
                        show: true,
                        position: 'top',
                        color: '#000',
                        fontSize: 14,
                        fontWeight: 'bold',
                    },
                }]
            };
            option && myChart.setOption(option);
        },

    },
};
</script>
<style scoped>
* {
    padding: 0;
    margin: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.container {
    width: 100%;
    height: calc(100% - 20px);
    padding-top: 20px;
}

.main {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    padding: 20px;
    background-color: #fff;
}

.row {
    border: none;
    margin-top: 20px;
    justify-content: space-between;
}

.row_l {
    width: calc(55% - 30px);
    height: 380px;
    /* margin-right: 15px; */
    border: 1px solid #DFDFDF;
    border-radius: 5px;
}

.row_r {
    width: 45%;
    height: 380px;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
}

.row_header {
    padding: 15px 15px 0 15px;
    justify-content: space-between;
}

.row_header_l {
    font-size: 14px;
    color: #666;
}

.row_header_l img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.echart1 {
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 20px;
}

.echart2 {
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 20px;
}

.echart3 {
    width: 100%;
    height: calc(100% - 150px);
    margin-top: 20px;
}

.echart4 {
    width: 100%;
    height: calc(100% - 150px);
    margin-top: 20px;
}

.header_btn {
    width: 80px;
    padding: 0 10px;
    height: 30px;
    background-color: #6F72FF;
    border-radius: 5px;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    margin-right: 15px;
    cursor: pointer;
    border: none;
    outline: none;
    margin-left: 10px;
}

.el-select-dropdown__item {
    padding-left: 15px;
}
</style>